<template>
  <!-- 笑脸图标 -->
  <div class="chatEmojiBox" v-show="isShowEmojiBox">
    <img
      v-for="(v,i) in emojiList"
      :src="require(`../../static/faces/${v}`)"
      :key="i"
      @click="selectEmoji(i)"
      class="img-style"
    />
  </div>
</template>

<script>
import emoji from "../config/emoji.js";

export default {
  name: 'chatEmoji',
  data() {
    return {
      emojiList: emoji.obj,
      isShowEmojiBox: false,  // 是否展示表情
    };
  },
  props: {
    sendTextMsg: String
  },
  methods: {
    selectEmoji(e) {

      let value = (this.sendTextMsg || "") + e;

      this.$emit('selectEmoji', value)
      this.isShowEmojiBox = false;
    }
  },
};
</script>
<style scoped>
.chatEmojiBox{
  background-color: #fafafa;
  overflow: hidden;
}
.img-style {
  float: left;
  width: 8vw;
  margin: 1vw;
  cursor: pointer;
}
.img-style:hover {
  background-color: aquamarine;
}
</style>
